<template>
  <el-dialog :visible="visible" custom-class="userDialog-wrapper" :before-close="handleClose">
    <el-form :model="userform">
      <div class="userform-content">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                用户名
              </div>
              <el-input  :placeholder="userform.username" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                姓名
              </div>
              <el-input :placeholder="userform.name" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                性别
              </div>
              <el-input  :placeholder="userform.sex" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                办公电话
              </div>
              <el-input :placeholder="userform.cellphone" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                联系电话
              </div>
              <el-input  :placeholder="userform.tele" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                邮箱
              </div>
              <el-input :placeholder="userform.email" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                职位
              </div>
              <el-input  :placeholder="userform.position" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                职级
              </div>
              <el-input :placeholder="userform.permissionlv" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                状态
              </div>
              <el-input :placeholder="userform.status" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth">
              <div slot="label" class="form-title">
                备注
              </div>
              <el-input  :placeholder="userform.remark" readonly :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="title" style="font-size: 20px">
      详细信息
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" type="info">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'userDialog',
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.visible = this.visibleFlag
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: false
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    userform: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClose () {
      this.$emit('close-dialog')
    }
  }
}
</script>

<style lang="scss" scoped>
  .userform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
</style>
